<template>
  <mt-modal ref="ruleExplanationRef">
    <view class="container">
      <image class="bg-img" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/rule-bg.png"></image>
      <view>
        <view class="flex">
          <view class="line flex">
            <view class="line-left"></view>
            <text class="px-24rpx text-#1A1A1A text-32rpx font-bold">佣金规则</text>
            <view class="line-right"></view>
          </view>
        </view>
      </view>
      <view v-if="ruleExplanationText.length" class="box pb-40rpx">
        <view v-for="(item, index) in ruleExplanationText" :key="index" class="item px-32rpx pt-32rpx">
          <text class="text-#1C213E fw-600 text-28rpx"> {{ `${index + 1}. ${item.dictLabel}` }} </text>
          <view v-for="(subItem, index) in item.remark?.split('\n')" :key="index" class="flex flex-items-center mt-16rpx">
            <view class="dot mr-16rpx"></view>
            <text class="text-#727687 text-28rpx fw-400">{{ subItem }}</text>
          </view>
        </view>
      </view>
      <view v-else class="box pb-40rpx">
        <mt-empty-view class="mt-32rpx">
          <text class="text-#727687 text-28rpx">暂无佣金规则</text>
        </mt-empty-view>
      </view>
      <view class="flex flex-items-center flex-justify-around border border-t-solid border-#D7DBE1 pt-28rpx" @click="handleCloseRuleExplanation">
        <text class="text-#1484EE text-40rpx fw-400">我知道了</text>
      </view>
    </view>
  </mt-modal>
</template>

<script name="CommissionRuleModalBox" setup>
import { getDictList } from '@/api/index.js';
import { onLoad } from '@dcloudio/uni-app';
const ruleExplanationRef = ref(null);

// 规则说明内容
const ruleExplanationText = ref([]);

// 获取佣金规则
const queryDictList = async () => {
  const { data } = await getDictList({ key: 'commission_rules' });
  ruleExplanationText.value = data;
};

const handleCommissionRules = () => {
  const options = {
    slot: true,
    showTitle: false,
    showFooter: false,
    success: async (e) => {}
  };
  ruleExplanationRef.value.open(options);
};

const handleCloseRuleExplanation = () => {
  ruleExplanationRef.value.close();
};

defineExpose({
  handleCommissionRules
});

onLoad(() => {
  queryDictList();
});
</script>

<style lang="scss" scoped>
.container {
  position: relative;

  .bg-img {
    position: absolute;
    top: -40rpx;
    left: 0;
    height: 186rpx;
  }
  .box {
    max-height: 600rpx;
    overflow-y: auto;
  }
  .line {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 0 18%;
    .line-left {
      width: 22%;
      border-radius: 0px 0px 0px 0px;
      border-bottom: 1px solid;
      border-image: linear-gradient(90deg, rgba(20, 132, 238, 0), rgba(20, 132, 238, 1)) 1 1;
    }
    .line-right {
      width: 22%;
      border-radius: 0px 0px 0px 0px;
      border-bottom: 1px solid;
      border-image: linear-gradient(90deg, rgba(20, 132, 238, 1), rgba(217, 185, 151, 0)) 1 1;
    }
  }
  .dot {
    width: 12rpx;
    height: 12rpx;
    min-width: 12rpx;
    background-color: #727687;
    border-radius: 50%;
  }
}

:deep(.mt-modal-body) {
  padding: 40rpx 0 28rpx !important;
}
</style>
